figma-styled-components - npm Package Compare versions

Comparing version 1.2.5 to 1.2.6

dist/OptionStrip/OptionStrip.d.ts

@@ -8,3 +8,4 @@ import * as React from 'react';
     options: StripOption[];
-    defaultOption?: number;
+    defaultValue?: string;
+    value?: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -14,7 +15,9 @@ }
     options: StripOption[];
-    defaultSelected: number;
-    selectedOption: string;
+    defaultSelected: string;
+    value: string;
 }> {
     constructor(props: OptionStripProps);
     render(): JSX.Element;
+    componentDidUpdate(prevState: any): void;
+    private updateState;
     private handleChange;
@@ -21,0 +24,0 @@ }

dist/OptionStrip/OptionStrip.js

@@ -55,7 +55,5 @@ "use strict";
         this.state = {
-            defaultSelected: this.props.defaultOption || 0,
+            defaultSelected: this.props.defaultValue || this.props.options[0].value,
             options: this.props.options,
-            selectedOption: this.props.defaultOption
-                ? this.props.options[this.props.defaultOption].value
-                : this.props.options[0].value
+            value: this.props.value ? this.props.value : this.props.defaultValue ? this.props.defaultValue : this.props.options[0].value
         };
@@ -66,11 +64,15 @@ this.handleChange = this.handleChange.bind(this);
         return (React.createElement(OptionStripContainer, Object.assign({}, this.props), this.props.options.map((option, i) => {
-            return (React.createElement(OptionStripOption, { key: `options-strip-item-` + option.value, selected: option.value === this.state.selectedOption },
-                React.createElement("input", { type: 'radio', name: `options-strip-${this.props.options[0].label}`, onChange: this.handleChange, value: option.value, checked: option.value === this.state.selectedOption ? true : false }),
+            return (React.createElement(OptionStripOption, { key: `options-strip-item-` + option.value, selected: option.value === this.state.value },
+                React.createElement("input", { type: 'radio', name: `options-strip-${this.props.options[0].label}`, onChange: this.handleChange, value: option.value, checked: option.value === this.state.value ? true : false }),
                 React.createElement(Text_1.Text, { size: 'small' }, option.label ? option.label : option.value)));
         })));
     }
-    handleChange(event) {
-        event.persist();
+    componentDidUpdate(prevState) {
+        if (this.props.value && prevState.value !== this.props.value) {
+            this.setState({ value: this.props.value });
+        }
+    }
+    updateState(value, event) {
         this.setState({
-            selectedOption: event.target.value
+            value: value
         }, () => {
@@ -82,3 +84,9 @@ if (this.props.onChange) {
     }
+    handleChange(event) {
+        event.persist();
+        const value = event.target.value;
+        const storedEvent = event;
+        this.updateState(value, storedEvent);
+    }
 }
 exports.OptionStrip = styled_components_1.default(OptionStripFactory) ``;

dist/Select/Select.d.ts

 import * as React from 'react';
 export interface SelectOptionItem {
-    label?: string;
-    value?: string;
+    label: string;
+    value: string;
 }
@@ -9,11 +9,19 @@ export interface SelectOptions extends SelectOptionItem {
 }
+interface SelectOptionGroup {
+    label: string;
+    group: SelectOptionItem[];
+}
 export interface SelectProps {
-    options: SelectOptions[];
-    defaultOption?: SelectOptionItem;
+    options: Array<SelectOptionItem | SelectOptionGroup>;
+    defaultValue?: SelectOptionItem;
     onChange?: any;
     placeholder?: string;
     noDefault?: boolean;
+    value?: {
+        value: string;
+        label: string;
+    };
 }
 export declare class SelectFactory extends React.Component<SelectProps, {
-    selectedOption: SelectOptionItem;
+    value: SelectOptionItem;
     madeSelection: boolean;
@@ -24,4 +32,6 @@ showOptions: boolean;
     constructor(props: SelectProps);
+    componentDidUpdate(prevState: any): void;
     render(): JSX.Element;
     private handleClick;
+    private updateState;
     private toggleSelect;
@@ -31,1 +41,2 @@ private getInialOption;
 export declare const Select: import("styled-components").StyledComponent<typeof SelectFactory, any, {}, never>;
+export {};

dist/Select/Select.js

@@ -44,4 +44,3 @@ "use strict";
 `;
-const SelectGroup = styled_components_1.default.div `
-`;
+const SelectGroup = styled_components_1.default.div ``;
 const SelectChevronIcon = (props) => {
@@ -52,4 +51,3 @@ return (React.createElement("div", Object.assign({}, props),
 };
-const SelectChevron = styled_components_1.default(SelectChevronIcon) `
-`;
+const SelectChevron = styled_components_1.default(SelectChevronIcon) ``;
 const SelectTrigger = styled_components_1.default.button `
@@ -68,3 +66,3 @@ display: flex;
   background-color: #ffffff;
-  font-family: "Inter", sans-serif;
+  font-family: 'Inter', sans-serif;
   font-weight: 400;
@@ -123,6 +121,6 @@ font-size: 11px;
 const SelectOverlay = styled_components_1.default.div `
-  display: ${(props) => props.show ? 'block' : 'none'};
+  display: ${(props) => (props.show ? 'block' : 'none')};
   position: fixed;
   width: 100%;
-  height:100%;
+  height: 100%;
   top: 0;
@@ -137,4 +135,8 @@ left: 0;
             madeSelection: false,
-            selectedOption: props.defaultOption ? props.defaultOption : this.getInialOption(props.options),
-            showOptions: false
+            showOptions: false,
+            value: props.value
+                ? props.value
+                : props.defaultValue
+                    ? props.defaultValue
+                    : this.getInialOption()
         };
@@ -145,20 +147,30 @@ this.toggleSelect = this.toggleSelect.bind(this);
     }
+    componentDidUpdate(prevState) {
+        if (this.props.value && prevState.value !== this.props.value) {
+            this.updateState(this.props.value.label, this.props.value.value);
+        }
+    }
     render() {
-        const { defaultOption, placeholder, options, onChange, noDefault, ...props } = this.props;
+        const { defaultValue, placeholder, options, onChange, noDefault, value, ...props } = this.props;
         return (React.createElement("div", Object.assign({}, props),
             React.createElement(SelectOverlay, { show: this.state.showOptions ? true : false, onClick: this.toggleSelect }),
             React.createElement(SelectTrigger, { onClick: this.toggleSelect },
-                React.createElement(Text_1.Text, null, placeholder && !this.state.madeSelection ? placeholder : this.state.selectedOption.label),
+                React.createElement(Text_1.Text, null, placeholder && !this.state.madeSelection
+                    ? placeholder
+                    : this.state.value.label),
                 React.createElement(SelectChevron, null)),
             React.createElement(SelectOptions, { className: this.state.showOptions ? 'show-options' : undefined }, options.map((option, i) => {
-                return option.group ?
-                    React.createElement(SelectGroup, { key: `group-parent-` + i }, option.group.map((item) => {
+                if ('group' in option) {
+                    return (React.createElement(SelectGroup, { key: `group-parent-` + i }, option.group.map((item) => {
                         return (React.createElement(SelectItem, { key: `group-` + item.label, id: item.value || item.label, "data-value": item.value, "data-label": item.label || item.value, onClick: this.handleClick },
-                            this.state.selectedOption.value === item.value && this.state.madeSelection && React.createElement(SelectedCheck, null),
+                            this.state.value.value === item.value &&
+                                this.state.madeSelection && React.createElement(SelectedCheck, null),
                             React.createElement(Text_1.Text, { size: 'medium', inverted: true }, item.label)));
-                    }))
-                    :
-                        React.createElement(SelectItem, { key: `list-` + i, id: option.value, "data-value": option.value, "data-label": option.label || option.value, onClick: this.handleClick },
-                            this.state.selectedOption.value === option.value && React.createElement(SelectedCheck, null),
-                            React.createElement(Text_1.Text, { size: 'medium', inverted: true }, option.label || option.value));
+                    })));
+                }
+                else {
+                    return (React.createElement(SelectItem, { key: `list-` + i, id: option.value, "data-value": option.value, "data-label": option.label || option.value, onClick: this.handleClick },
+                        this.state.value.value === option.value && React.createElement(SelectedCheck, null),
+                        React.createElement(Text_1.Text, { size: 'medium', inverted: true }, option.label || option.value)));
+                }
             }))));
@@ -170,6 +182,9 @@ }
         const label = target.getAttribute('data-label') || '';
+        this.updateState(value, label);
+    }
+    updateState(value, label) {
         this.setState({
             madeSelection: true,
-            selectedOption: { value, label },
-            showOptions: false
+            showOptions: false,
+            value: { value, label }
         }, this.props.onChange ? this.props.onChange(value) : undefined);
@@ -180,8 +195,15 @@ }
     }
-    getInialOption(optionItems) {
-        if (optionItems[0].group) {
-            return optionItems[0].group[0].label ? { value: optionItems[0].group[0].value, label: optionItems[0].group[0].label } : { value: optionItems[0].group[0].value, label: optionItems[0].group[0].value };
+    getInialOption() {
+        const firstOption = this.props.options[0];
+        if ('group' in firstOption) {
+            return {
+                label: firstOption.group[0].label,
+                value: firstOption.group[0].value
+            };
         }
         else {
-            return optionItems[0].label ? { value: optionItems[0].value, label: optionItems[0].label } : { value: optionItems[0].value, label: optionItems[0].value };
+            return {
+                label: firstOption.label,
+                value: firstOption.value
+            };
         }
@@ -203,3 +225,3 @@ }
 
-  ${SelectOptions}{
+  ${SelectOptions} {
     margin: 0;
@@ -206,0 +228,0 @@ padding: 8px 0 8px 0;

package.json

 {
   "name": "figma-styled-components",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "Figma UI styled components",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

192263

0.64%

Number of package files

413

0.49%

Lines of code

3579

1.45%

No dependency changes