@khanacademy/wonder-blocks-birthday-picker 4.0.26 → 4.0.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/dist/es/index.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-birthday-picker
|
|
2
2
|
|
|
3
|
+
## 4.0.28
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- @khanacademy/wonder-blocks-dropdown@10.2.9
|
|
8
|
+
|
|
9
|
+
## 4.0.27
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- eafcfa3: Replaces `semanticColor.icon` with `semanticColor.core.foreground` tokens
|
|
14
|
+
- Updated dependencies [eafcfa3]
|
|
15
|
+
- Updated dependencies [956f8bd]
|
|
16
|
+
- Updated dependencies [956f8bd]
|
|
17
|
+
- Updated dependencies [eafcfa3]
|
|
18
|
+
- Updated dependencies [b42b694]
|
|
19
|
+
- Updated dependencies [956f8bd]
|
|
20
|
+
- @khanacademy/wonder-blocks-tokens@12.0.0
|
|
21
|
+
- @khanacademy/wonder-blocks-dropdown@10.2.8
|
|
22
|
+
- @khanacademy/wonder-blocks-icon@5.2.12
|
|
23
|
+
- @khanacademy/wonder-blocks-layout@3.1.29
|
|
24
|
+
- @khanacademy/wonder-blocks-typography@4.2.14
|
|
25
|
+
|
|
3
26
|
## 4.0.26
|
|
4
27
|
|
|
5
28
|
### Patch Changes
|
package/dist/es/index.js
CHANGED
|
@@ -10,6 +10,6 @@ import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
|
|
|
10
10
|
import { SingleSelect, OptionItem } from '@khanacademy/wonder-blocks-dropdown';
|
|
11
11
|
import infoIcon from '@phosphor-icons/core/bold/info-bold.svg';
|
|
12
12
|
|
|
13
|
-
const CUR_YEAR=new Date().getYear()+1900;const defaultLabels=Object.freeze({errorMessage:"Please select a valid birthdate.",month:"Month",year:"Year",day:"Day"});const FIELD_MIN_WIDTH_FULL=110;const FIELD_MIN_WIDTH_MONTH_YEAR=167;const FIELD_MIN_WIDTH_DAY=100;const xsMin="520px";const screenSizes={small:`@media (max-width: ${xsMin})`};const defaultStyles=StyleSheet.create({wrapper:{flexDirection:"row",[screenSizes.small]:{flexDirection:"column"}},input:{[screenSizes.small]:{minWidth:"100%"}}});class BirthdayPicker extends React.Component{getStateFromDefault(){const{defaultValue,monthYearOnly}=this.props;const initialState={month:null,day:monthYearOnly?"1":null,year:null,error:null};this.labels={...defaultLabels,...this.props.labels};if(defaultValue){let date=null;try{date=Temporal.PlainDate.from(defaultValue);}catch(err){initialState.error=this.labels.errorMessage;return initialState}if(monthYearOnly){date=date.with({day:date.daysInMonth});}initialState.month=String(date.month);initialState.day=String(date.day);initialState.year=String(date.year);if(this.isFutureDate(date)){initialState.error=this.labels.errorMessage;}}return initialState}isFutureDate(date){return Temporal.PlainDate.compare(date,Temporal.Now.plainDateISO())===1}maybeRenderError(){const{error}=this.state;if(!error){return null}return jsxs(Fragment,{children:[jsx(Strut,{size:spacing.xxxSmall_4}),jsxs(View,{style:{flexDirection:"row",placeItems:"center"},role:"alert",children:[jsx(PhosphorIcon,{size:"small",icon:infoIcon,color:semanticColor.
|
|
13
|
+
const CUR_YEAR=new Date().getYear()+1900;const defaultLabels=Object.freeze({errorMessage:"Please select a valid birthdate.",month:"Month",year:"Year",day:"Day"});const FIELD_MIN_WIDTH_FULL=110;const FIELD_MIN_WIDTH_MONTH_YEAR=167;const FIELD_MIN_WIDTH_DAY=100;const xsMin="520px";const screenSizes={small:`@media (max-width: ${xsMin})`};const defaultStyles=StyleSheet.create({wrapper:{flexDirection:"row",[screenSizes.small]:{flexDirection:"column"}},input:{[screenSizes.small]:{minWidth:"100%"}}});class BirthdayPicker extends React.Component{getStateFromDefault(){const{defaultValue,monthYearOnly}=this.props;const initialState={month:null,day:monthYearOnly?"1":null,year:null,error:null};this.labels={...defaultLabels,...this.props.labels};if(defaultValue){let date=null;try{date=Temporal.PlainDate.from(defaultValue);}catch(err){initialState.error=this.labels.errorMessage;return initialState}if(monthYearOnly){date=date.with({day:date.daysInMonth});}initialState.month=String(date.month);initialState.day=String(date.day);initialState.year=String(date.year);if(this.isFutureDate(date)){initialState.error=this.labels.errorMessage;}}return initialState}isFutureDate(date){return Temporal.PlainDate.compare(date,Temporal.Now.plainDateISO())===1}maybeRenderError(){const{error}=this.state;if(!error){return null}return jsxs(Fragment,{children:[jsx(Strut,{size:spacing.xxxSmall_4}),jsxs(View,{style:{flexDirection:"row",placeItems:"center"},role:"alert",children:[jsx(PhosphorIcon,{size:"small",icon:infoIcon,color:semanticColor.core.foreground.critical.subtle,"aria-hidden":"true"}),jsx(Strut,{size:spacing.xxxSmall_4}),jsx(Body,{style:{color:semanticColor.status.critical.foreground},children:error})]})]})}monthsShort(){const format=new Intl.DateTimeFormat(navigator.language,{month:"short"}).format;return [...Array(12).keys()].map(m=>format(new Date(2021,m,15)))}renderMonth(){const{disabled,monthYearOnly,dropdownStyle}=this.props;const{month}=this.state;const minWidth=this.getMonthYearWidth(monthYearOnly);return jsx(SingleSelect,{"aria-label":this.labels.month,"aria-invalid":!!this.state.error,error:!!this.state.error,disabled:disabled,placeholder:this.labels.month,onChange:this.handleMonthChange,selectedValue:month,style:[{minWidth},defaultStyles.input,dropdownStyle],testId:"birthday-picker-month",children:this.monthsShort().map((monthShort,i)=>jsx(OptionItem,{label:monthShort,value:String(i+1)},monthShort))})}maybeRenderDay(){const{disabled,monthYearOnly,dropdownStyle}=this.props;const{day}=this.state;if(monthYearOnly){return null}return jsxs(Fragment,{children:[jsx(Strut,{size:spacing.xSmall_8}),jsx(SingleSelect,{"aria-label":this.labels.day,"aria-invalid":!!this.state.error,error:!!this.state.error,disabled:disabled,placeholder:this.labels.day,onChange:this.handleDayChange,selectedValue:day,style:[{minWidth:FIELD_MIN_WIDTH_DAY},defaultStyles.input,dropdownStyle],testId:"birthday-picker-day",children:Array.from(Array(31)).map((_,day)=>jsx(OptionItem,{label:String(day+1),value:String(day+1)},String(day+1)))})]})}getMonthYearWidth(monthYearOnly){return monthYearOnly?FIELD_MIN_WIDTH_MONTH_YEAR:FIELD_MIN_WIDTH_FULL}renderYear(){const{disabled,monthYearOnly,dropdownStyle}=this.props;const{year}=this.state;const minWidth=this.getMonthYearWidth(monthYearOnly);return jsx(SingleSelect,{"aria-label":this.labels.year,"aria-invalid":!!this.state.error,error:!!this.state.error,disabled:disabled,placeholder:this.labels.year,onChange:this.handleYearChange,selectedValue:year,style:[{minWidth},defaultStyles.input,dropdownStyle],dropdownStyle:{minWidth:150},testId:"birthday-picker-year",children:Array.from(Array(120)).map((_,yearOffset)=>jsx(OptionItem,{label:String(CUR_YEAR-yearOffset),value:String(CUR_YEAR-yearOffset)},String(CUR_YEAR-yearOffset)))})}render(){const{style}=this.props;return jsxs(Fragment,{children:[jsxs(View,{testId:"birthday-picker",style:[defaultStyles.wrapper,style],children:[this.renderMonth(),this.maybeRenderDay(),jsx(Strut,{size:spacing.xSmall_8}),this.renderYear()]}),this.maybeRenderError()]})}constructor(props){super(props),this.lastChangeValue=null,this.reportChange=value=>{if(value!==this.lastChangeValue){this.lastChangeValue=value;this.props.onChange(value);}},this.handleChange=()=>{const{month,day,year}=this.state;const{monthYearOnly}=this.props;const dateFields=[year,month];if(!monthYearOnly){dateFields.push(day);}if(dateFields.some(field=>field===null)){this.reportChange(null);return}let date;try{if(monthYearOnly){date=Temporal.PlainDate.from({year:Number(year),month:Number(month),day:31});}else {date=Temporal.PlainDate.from({year:Number(year),month:Number(month),day:Number(day)},{overflow:"reject"});}}catch(err){this.setState({error:this.labels.errorMessage});this.reportChange(null);return}if(this.isFutureDate(date)){this.setState({error:this.labels.errorMessage});this.reportChange(null);}else {this.setState({error:null});this.reportChange(date.toString());}},this.handleMonthChange=month=>{this.setState({month},this.handleChange);},this.handleDayChange=day=>{this.setState({day},this.handleChange);},this.handleYearChange=year=>{this.setState({year},this.handleChange);};this.lastChangeValue=props.defaultValue||null;this.state=this.getStateFromDefault();}}
|
|
14
14
|
|
|
15
15
|
export { BirthdayPicker as default };
|
package/dist/index.js
CHANGED
|
@@ -35,6 +35,6 @@ function _interopNamespace(e) {
|
|
|
35
35
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
36
36
|
var infoIcon__default = /*#__PURE__*/_interopDefaultLegacy(infoIcon);
|
|
37
37
|
|
|
38
|
-
const CUR_YEAR=new Date().getYear()+1900;const defaultLabels=Object.freeze({errorMessage:"Please select a valid birthdate.",month:"Month",year:"Year",day:"Day"});const FIELD_MIN_WIDTH_FULL=110;const FIELD_MIN_WIDTH_MONTH_YEAR=167;const FIELD_MIN_WIDTH_DAY=100;const xsMin="520px";const screenSizes={small:`@media (max-width: ${xsMin})`};const defaultStyles=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",[screenSizes.small]:{flexDirection:"column"}},input:{[screenSizes.small]:{minWidth:"100%"}}});class BirthdayPicker extends React__namespace.Component{getStateFromDefault(){const{defaultValue,monthYearOnly}=this.props;const initialState={month:null,day:monthYearOnly?"1":null,year:null,error:null};this.labels={...defaultLabels,...this.props.labels};if(defaultValue){let date=null;try{date=temporalPolyfill.Temporal.PlainDate.from(defaultValue);}catch(err){initialState.error=this.labels.errorMessage;return initialState}if(monthYearOnly){date=date.with({day:date.daysInMonth});}initialState.month=String(date.month);initialState.day=String(date.day);initialState.year=String(date.year);if(this.isFutureDate(date)){initialState.error=this.labels.errorMessage;}}return initialState}isFutureDate(date){return temporalPolyfill.Temporal.PlainDate.compare(date,temporalPolyfill.Temporal.Now.plainDateISO())===1}maybeRenderError(){const{error}=this.state;if(!error){return null}return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntime.jsxs(wonderBlocksCore.View,{style:{flexDirection:"row",placeItems:"center"},role:"alert",children:[jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"small",icon:infoIcon__default["default"],color:wonderBlocksTokens.semanticColor.
|
|
38
|
+
const CUR_YEAR=new Date().getYear()+1900;const defaultLabels=Object.freeze({errorMessage:"Please select a valid birthdate.",month:"Month",year:"Year",day:"Day"});const FIELD_MIN_WIDTH_FULL=110;const FIELD_MIN_WIDTH_MONTH_YEAR=167;const FIELD_MIN_WIDTH_DAY=100;const xsMin="520px";const screenSizes={small:`@media (max-width: ${xsMin})`};const defaultStyles=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",[screenSizes.small]:{flexDirection:"column"}},input:{[screenSizes.small]:{minWidth:"100%"}}});class BirthdayPicker extends React__namespace.Component{getStateFromDefault(){const{defaultValue,monthYearOnly}=this.props;const initialState={month:null,day:monthYearOnly?"1":null,year:null,error:null};this.labels={...defaultLabels,...this.props.labels};if(defaultValue){let date=null;try{date=temporalPolyfill.Temporal.PlainDate.from(defaultValue);}catch(err){initialState.error=this.labels.errorMessage;return initialState}if(monthYearOnly){date=date.with({day:date.daysInMonth});}initialState.month=String(date.month);initialState.day=String(date.day);initialState.year=String(date.year);if(this.isFutureDate(date)){initialState.error=this.labels.errorMessage;}}return initialState}isFutureDate(date){return temporalPolyfill.Temporal.PlainDate.compare(date,temporalPolyfill.Temporal.Now.plainDateISO())===1}maybeRenderError(){const{error}=this.state;if(!error){return null}return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntime.jsxs(wonderBlocksCore.View,{style:{flexDirection:"row",placeItems:"center"},role:"alert",children:[jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"small",icon:infoIcon__default["default"],color:wonderBlocksTokens.semanticColor.core.foreground.critical.subtle,"aria-hidden":"true"}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntime.jsx(wonderBlocksTypography.Body,{style:{color:wonderBlocksTokens.semanticColor.status.critical.foreground},children:error})]})]})}monthsShort(){const format=new Intl.DateTimeFormat(navigator.language,{month:"short"}).format;return [...Array(12).keys()].map(m=>format(new Date(2021,m,15)))}renderMonth(){const{disabled,monthYearOnly,dropdownStyle}=this.props;const{month}=this.state;const minWidth=this.getMonthYearWidth(monthYearOnly);return jsxRuntime.jsx(wonderBlocksDropdown.SingleSelect,{"aria-label":this.labels.month,"aria-invalid":!!this.state.error,error:!!this.state.error,disabled:disabled,placeholder:this.labels.month,onChange:this.handleMonthChange,selectedValue:month,style:[{minWidth},defaultStyles.input,dropdownStyle],testId:"birthday-picker-month",children:this.monthsShort().map((monthShort,i)=>jsxRuntime.jsx(wonderBlocksDropdown.OptionItem,{label:monthShort,value:String(i+1)},monthShort))})}maybeRenderDay(){const{disabled,monthYearOnly,dropdownStyle}=this.props;const{day}=this.state;if(monthYearOnly){return null}return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntime.jsx(wonderBlocksDropdown.SingleSelect,{"aria-label":this.labels.day,"aria-invalid":!!this.state.error,error:!!this.state.error,disabled:disabled,placeholder:this.labels.day,onChange:this.handleDayChange,selectedValue:day,style:[{minWidth:FIELD_MIN_WIDTH_DAY},defaultStyles.input,dropdownStyle],testId:"birthday-picker-day",children:Array.from(Array(31)).map((_,day)=>jsxRuntime.jsx(wonderBlocksDropdown.OptionItem,{label:String(day+1),value:String(day+1)},String(day+1)))})]})}getMonthYearWidth(monthYearOnly){return monthYearOnly?FIELD_MIN_WIDTH_MONTH_YEAR:FIELD_MIN_WIDTH_FULL}renderYear(){const{disabled,monthYearOnly,dropdownStyle}=this.props;const{year}=this.state;const minWidth=this.getMonthYearWidth(monthYearOnly);return jsxRuntime.jsx(wonderBlocksDropdown.SingleSelect,{"aria-label":this.labels.year,"aria-invalid":!!this.state.error,error:!!this.state.error,disabled:disabled,placeholder:this.labels.year,onChange:this.handleYearChange,selectedValue:year,style:[{minWidth},defaultStyles.input,dropdownStyle],dropdownStyle:{minWidth:150},testId:"birthday-picker-year",children:Array.from(Array(120)).map((_,yearOffset)=>jsxRuntime.jsx(wonderBlocksDropdown.OptionItem,{label:String(CUR_YEAR-yearOffset),value:String(CUR_YEAR-yearOffset)},String(CUR_YEAR-yearOffset)))})}render(){const{style}=this.props;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(wonderBlocksCore.View,{testId:"birthday-picker",style:[defaultStyles.wrapper,style],children:[this.renderMonth(),this.maybeRenderDay(),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),this.renderYear()]}),this.maybeRenderError()]})}constructor(props){super(props),this.lastChangeValue=null,this.reportChange=value=>{if(value!==this.lastChangeValue){this.lastChangeValue=value;this.props.onChange(value);}},this.handleChange=()=>{const{month,day,year}=this.state;const{monthYearOnly}=this.props;const dateFields=[year,month];if(!monthYearOnly){dateFields.push(day);}if(dateFields.some(field=>field===null)){this.reportChange(null);return}let date;try{if(monthYearOnly){date=temporalPolyfill.Temporal.PlainDate.from({year:Number(year),month:Number(month),day:31});}else {date=temporalPolyfill.Temporal.PlainDate.from({year:Number(year),month:Number(month),day:Number(day)},{overflow:"reject"});}}catch(err){this.setState({error:this.labels.errorMessage});this.reportChange(null);return}if(this.isFutureDate(date)){this.setState({error:this.labels.errorMessage});this.reportChange(null);}else {this.setState({error:null});this.reportChange(date.toString());}},this.handleMonthChange=month=>{this.setState({month},this.handleChange);},this.handleDayChange=day=>{this.setState({day},this.handleChange);},this.handleYearChange=year=>{this.setState({year},this.handleChange);};this.lastChangeValue=props.defaultValue||null;this.state=this.getStateFromDefault();}}
|
|
39
39
|
|
|
40
40
|
module.exports = BirthdayPicker;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-birthday-picker",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.28",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -11,11 +11,11 @@
|
|
|
11
11
|
"types": "dist/index.d.ts",
|
|
12
12
|
"dependencies": {
|
|
13
13
|
"@khanacademy/wonder-blocks-core": "12.3.0",
|
|
14
|
-
"@khanacademy/wonder-blocks-
|
|
15
|
-
"@khanacademy/wonder-blocks-
|
|
16
|
-
"@khanacademy/wonder-blocks-layout": "3.1.
|
|
17
|
-
"@khanacademy/wonder-blocks-tokens": "
|
|
18
|
-
"@khanacademy/wonder-blocks-typography": "4.2.
|
|
14
|
+
"@khanacademy/wonder-blocks-icon": "5.2.12",
|
|
15
|
+
"@khanacademy/wonder-blocks-dropdown": "10.2.9",
|
|
16
|
+
"@khanacademy/wonder-blocks-layout": "3.1.29",
|
|
17
|
+
"@khanacademy/wonder-blocks-tokens": "12.0.0",
|
|
18
|
+
"@khanacademy/wonder-blocks-typography": "4.2.14"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"@phosphor-icons/core": "^2.0.2",
|