Skip to content

Commit 075a8d6

Browse files
devongovettdevongovett
authored
Rename StaticField to LabeledValue (#3488)
1 parent 099159d commit 075a8d6

File tree

11 files changed

+316
-324
lines changed

11 files changed

+316
-324
lines changed

‎packages/@adobe/spectrum-css-temp/components/fieldlabel/index.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -160,13 +160,13 @@ governing permissions and limitations under the License.
160160
}
161161
}
162162

163-
.spectrum-StaticField {
163+
.spectrum-LabeledValue {
164164

165165
&.spectrum-Field--positionSide {
166166
align-items: first baseline;
167167
}
168168

169-
&.spectrum-Field--positionTop {
169+
&.spectrum-Field--positionTop {
170170
width: unset;
171171
}
172172

@@ -177,7 +177,7 @@ governing permissions and limitations under the License.
177177
.spectrum-Field-wrapper.spectrum-Field-wrapper {
178178
width: unset;
179179
}
180-
180+
181181
.spectrum-Field-field {
182182
overflow: hidden;
183183
word-break: break-word;

‎packages/@react-spectrum/staticfield/README.md renamed to ‎packages/@react-spectrum/labeledvalue/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
# @react-spectrum/staticfield
1+
# @react-spectrum/labeledvalue
22

33
This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.

‎packages/@react-spectrum/labeledvalue/chromatic/LabeledValue.chromatic.tsx

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/*
2+
* Copyright 2020 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {CalendarDate, CalendarDateTime, Time, ZonedDateTime} from '@internationalized/date';
14+
import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
15+
import {LabeledValue} from '..';
16+
17+
type LabeledValueStory = ComponentStoryObj<typeof LabeledValue>;
18+
19+
export default {
20+
title: 'LabeledValue',
21+
component: LabeledValue
22+
} as ComponentMeta<typeof LabeledValue>;
23+
24+
export let Default: LabeledValueStory = {
25+
args: {label: 'Test', value: 'This is some sample text'},
26+
name: 'String'
27+
};
28+
29+
export let StringArray: LabeledValueStory = {
30+
args: {label: 'Test', value: ['wow', 'cool', 'awesome']},
31+
name: 'String array'
32+
};
33+
34+
export let CalendarDateType: LabeledValueStory = {
35+
args: {label: 'Test', value: new CalendarDate(2019, 6, 5), formatOptions: {dateStyle: 'medium'}},
36+
name: 'CalendarDate'
37+
};
38+
39+
export let CalendarDateTimeType: LabeledValueStory = {
40+
args: {label: 'Test', value: new CalendarDateTime(2020, 2, 3, 12, 23, 24, 120), formatOptions: {dateStyle: 'medium', timeStyle: 'medium'}},
41+
name: 'CalendarDateTime'
42+
};
43+
44+
export let ZonedDateTimeType: LabeledValueStory = {
45+
args: {label: 'Test', value: new ZonedDateTime(2020, 2, 3, 'America/Los_Angeles', -28800000), formatOptions: {dateStyle: 'long', timeStyle: 'long'}},
46+
name: 'ZonedDateTime'
47+
};
48+
49+
export let DateType: LabeledValueStory = {
50+
args: {label: 'Test', value: new Date(2000, 5, 5), formatOptions: {dateStyle: 'long'}},
51+
name: 'Date'
52+
};
53+
54+
export let TimeType: LabeledValueStory = {
55+
args: {label: 'Test', value: new Time(9, 45), formatOptions: {timeStyle: 'short'}},
56+
name: 'Time'
57+
};
58+
59+
export let CalendarDateRange: LabeledValueStory = {
60+
args: {label: 'Test', value: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 7, 5)}, formatOptions: {dateStyle: 'medium'}},
61+
name: 'RangeValue<CalendarDate>'
62+
};
63+
64+
export let CalendarDateTimeRange: LabeledValueStory = {
65+
args: {label: 'Test', value: {start: new CalendarDateTime(2020, 2, 3, 12, 23, 24, 120), end: new CalendarDateTime(2020, 3, 3, 12, 23, 24, 120)}, formatOptions: {dateStyle: 'medium', timeStyle: 'medium'}},
66+
name: 'RangeValue<CalendarDateTime>'
67+
};
68+
69+
export let ZonedDateTimeRange: LabeledValueStory = {
70+
args: {label: 'Test', value: {start: new ZonedDateTime(2020, 2, 3, 'America/Los_Angeles', -28800000), end: new ZonedDateTime(2020, 3, 3, 'America/Los_Angeles', -28800000)}, formatOptions: {dateStyle: 'medium', timeStyle: 'medium'}},
71+
name: 'RangeValue<ZonedDateTime>'
72+
};
73+
74+
export let DateRange: LabeledValueStory = {
75+
args: {label: 'Test', value: {start: new Date(2019, 6, 5), end: new Date(2019, 6, 10)}, formatOptions: {dateStyle: 'medium'}},
76+
name: 'RangeValue<Date>'
77+
};
78+
79+
export let TimeRange: LabeledValueStory = {
80+
args: {label: 'Test', value: {start: new Time(9, 45), end: new Time(10, 50)}, formatOptions: {timeStyle: 'short'}},
81+
name: 'RangeValue<Time>'
82+
};
83+
84+
export let Number: LabeledValueStory = {
85+
args: {label: 'Test', value: 10},
86+
name: 'Number'
87+
};
88+
89+
export let NumberRange: LabeledValueStory = {
90+
args: {label: 'Test', value: {start: 10, end: 20}},
91+
name: 'RangeValue<Number>'
92+
};
93+
94+
export let LabelPostionSide: LabeledValueStory = {
95+
args: {label: 'Test', labelPosition: 'side'},
96+
name: 'labelPosition: side'
97+
};
98+
99+
export let LabelAlignEnd: LabeledValueStory = {
100+
args: {label: 'Test', labelAlign: 'end'},
101+
name: 'labelAlign: end'
102+
};
103+
104+
export let LabelAlignLabelPosition: LabeledValueStory = {
105+
args: {label: 'Test', labelPosition: 'side', labelAlign: 'end'},
106+
name: 'labelAlign: side, labelAlign: end'
107+
};
108+
109+
export let NoLabel: LabeledValueStory = {
110+
args: {label: null, value: 'test'},
111+
name: 'no visible label'
112+
};
113+
114+
export let CustomWidth: LabeledValueStory = {
115+
args: {label: 'Test', width: '300px'},
116+
name: 'custom width'
117+
};

‎packages/@react-spectrum/staticfield/index.ts renamed to ‎packages/@react-spectrum/labeledvalue/index.ts

File renamed without changes.

‎packages/@react-spectrum/staticfield/package.json renamed to ‎packages/@react-spectrum/labeledvalue/package.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{
2-
"name": "@react-spectrum/staticfield",
2+
"name": "@react-spectrum/labeledvalue",
33
"version": "3.0.0-alpha.1",
4-
"private": true,
54
"description": "Spectrum UI components in React",
65
"license": "Apache-2.0",
76
"main": "dist/main.js",

‎packages/@react-spectrum/staticfield/src/StaticField.tsx renamed to ‎packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import React, {RefObject} from 'react';
2020
import {useDateFormatter, useListFormatter, useNumberFormatter} from '@react-aria/i18n';
2121
import {useStyleProps} from '@react-spectrum/utils';
2222

23-
interface StaticFieldBaseProps extends DOMProps, StyleProps, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, AriaLabelingProps {}
23+
interface LabeledValueBaseProps extends DOMProps, StyleProps, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, AriaLabelingProps {}
2424

2525
type NumberValue = number | RangeValue<number>;
2626
interface NumberProps<T extends NumberValue> {
@@ -47,17 +47,17 @@ interface StringListProps<T extends string[]> {
4747
formatOptions?: Intl.ListFormatOptions
4848
}
4949

50-
type StaticFieldProps<T> =
50+
type LabeledValueProps<T> =
5151
T extends NumberValue ? NumberProps<T> :
5252
T extends DateTimeValue ? DateProps<T> :
5353
T extends string[] ? StringListProps<T> :
5454
T extends string ? StringProps<T> :
5555
never;
5656

57-
export type SpectrumStaticFieldTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue<number> | RangeValue<DateTime>;
58-
export type SpectrumStaticFieldProps<T> = StaticFieldProps<T> & StaticFieldBaseProps;
57+
type SpectrumLabeledValueTypes = string[] | string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time | number | RangeValue<number> | RangeValue<DateTime>;
58+
export type SpectrumLabeledValueProps<T> = LabeledValueProps<T> & LabeledValueBaseProps;
5959

60-
function StaticField<T extends SpectrumStaticFieldTypes>(props: SpectrumStaticFieldProps<T>, ref: RefObject<HTMLDivElement>) {
60+
function LabeledValue<T extends SpectrumLabeledValueTypes>(props: SpectrumLabeledValueProps<T>, ref: RefObject<HTMLDivElement>) {
6161
let {
6262
value,
6363
formatOptions,
@@ -80,7 +80,7 @@ function StaticField<T extends SpectrumStaticFieldTypes>(props: SpectrumStaticFi
8080
<div
8181
{...filterDOMProps(props)}
8282
{...styleProps}
83-
className={classNames(labelStyles, 'spectrum-StaticField', {[labelWrapperClass]: label}, styleProps.className)}
83+
className={classNames(labelStyles, 'spectrum-LabeledValue', {[labelWrapperClass]: label}, styleProps.className)}
8484
ref={ref}>
8585
{props.label &&
8686
<Label
@@ -93,23 +93,23 @@ function StaticField<T extends SpectrumStaticFieldTypes>(props: SpectrumStaticFi
9393
className={classNames(labelStyles, 'spectrum-Field-wrapper')}>
9494
<div
9595
className={classNames(labelStyles, 'spectrum-Field-field')}>
96-
{Array.isArray(value) &&
96+
{Array.isArray(value) &&
9797
// @ts-ignore
9898
<FormattedStringList value={value} formatOptions={formatOptions as Intl.ListFormatOptions} />}
9999

100-
{typeof value === 'object' && 'start' in value && typeof value.start === 'number' && typeof value.end === 'number' &&
100+
{typeof value === 'object' && 'start' in value && typeof value.start === 'number' && typeof value.end === 'number' &&
101101
<FormattedNumber value={value as NumberValue} formatOptions={formatOptions as Intl.NumberFormatOptions} />}
102102

103-
{typeof value === 'object' && 'start' in value && typeof value.start !== 'number' && typeof value.end !== 'number' &&
103+
{typeof value === 'object' && 'start' in value && typeof value.start !== 'number' && typeof value.end !== 'number' &&
104104
<FormattedDate value={value as DateTimeValue} formatOptions={formatOptions as Intl.DateTimeFormatOptions} />}
105105

106-
{typeof value === 'number' &&
106+
{typeof value === 'number' &&
107107
<FormattedNumber value={value} formatOptions={formatOptions as Intl.NumberFormatOptions} />}
108108

109109
{(typeof value === 'object' && ('calendar' in value || 'hour' in value) || (value instanceof Date)) &&
110110
<FormattedDate value={value} formatOptions={formatOptions as Intl.DateTimeFormatOptions} />}
111111

112-
{typeof value === 'string' &&
112+
{typeof value === 'string' &&
113113
value}
114114
</div>
115115
</div>
@@ -118,15 +118,15 @@ function StaticField<T extends SpectrumStaticFieldTypes>(props: SpectrumStaticFi
118118
}
119119

120120
function FormattedStringList<T extends string[]>(props: StringListProps<T>) {
121-
let stringFormatter = useListFormatter(props.formatOptions);
121+
let stringFormatter = useListFormatter(props.formatOptions);
122122

123123
return (
124124
<>{stringFormatter.format(props.value)}</>
125125
);
126126
}
127127

128128
function FormattedNumber<T extends NumberValue>(props: NumberProps<T>) {
129-
let numberFormatter = useNumberFormatter(props.formatOptions);
129+
let numberFormatter = useNumberFormatter(props.formatOptions);
130130
let value = props.value;
131131

132132
if (typeof value === 'object') {
@@ -137,10 +137,14 @@ function FormattedNumber<T extends NumberValue>(props: NumberProps<T>) {
137137
}
138138

139139
function FormattedDate<T extends DateTimeValue>(props: DateProps<T>) {
140-
let dateFormatter = useDateFormatter(props.formatOptions);
141-
let value = props.value;
140+
let {value, formatOptions} = props;
141+
if (!formatOptions) {
142+
formatOptions = getDefaultFormatOptions('start' in value ? value.start : value);
143+
}
144+
145+
let dateFormatter = useDateFormatter(formatOptions);
142146
let timeZone = dateFormatter.resolvedOptions().timeZone || getLocalTimeZone();
143-
let final;
147+
let final: Date;
144148

145149
if ('start' in value && 'end' in value) {
146150
let start = value.start;
@@ -161,18 +165,32 @@ function convertDateTime(value: DateTime, timeZone: any) {
161165
return value.toDate();
162166
} else if ('calendar' in value) {
163167
return value.toDate(timeZone);
164-
} else if (!(value instanceof Date)) {
168+
} else if (!(value instanceof Date)) {
165169
return convertValue(value).toDate(timeZone);
166170
}
167171

168172
return value;
169173
}
170174

175+
function getDefaultFormatOptions(value: DateTime): Intl.DateTimeFormatOptions {
176+
if (value instanceof Date) {
177+
return {dateStyle: 'long', timeStyle: 'short'};
178+
} else if ('timeZone' in value) {
179+
return {year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', timeZone: value.timeZone, timeZoneName: 'short'};
180+
} else if ('hour' in value && 'year' in value) {
181+
return {dateStyle: 'long', timeStyle: 'short'};
182+
} else if ('hour' in value) {
183+
return {timeStyle: 'short'};
184+
} else {
185+
return {dateStyle: 'long'};
186+
}
187+
}
188+
171189
function convertValue(value: Time) {
172190
let date = today(getLocalTimeZone());
173191

174192
return toCalendarDateTime(date, value);
175193
}
176194

177-
let _StaticField = React.forwardRef(StaticField);
178-
export {_StaticField as StaticField};
195+
let _LabeledValue = React.forwardRef(LabeledValue);
196+
export {_LabeledValue as LabeledValue};

‎packages/@react-spectrum/staticfield/src/index.ts renamed to ‎packages/@react-spectrum/labeledvalue/src/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,5 @@
1212

1313
/// <reference types="css-module-types" />
1414

15-
export * from './StaticField';
15+
export type {SpectrumLabeledValueProps} from './LabeledValue';
16+
export {LabeledValue} from './LabeledValue';

0 commit comments

Comments
 (0)