@rax-ui/select - npm Package Compare versions

Comparing version 1.0.0-beta.53 to 1.0.0-beta.54

lib/base.d.ts

 import { HTMLAttributes, RaxNode } from 'rax';
 import { StyledComponentProps } from '@rax-ui/styles';
-import { LocaledComponentProps } from '@rax-ui/locale';
-import { LocaleType } from './locale-type';
 export declare enum TextFieldAlign {
@@ -30,3 +28,3 @@ LEFT = "left",
 }
-export interface SelectBaseProps extends HTMLAttributesWeak, StyledComponentProps<any>, LocaledComponentProps<LocaleType> {
+export interface SelectBaseProps extends HTMLAttributesWeak, StyledComponentProps<any> {
     data?: any[];
@@ -33,0 +31,0 @@ label?: string;

lib/base.js

@@ -14,8 +14,4 @@ "use strict";
 
-var _toast = _interopRequireDefault(require("@rax-ui/toast"));
-
 var _weexPicker = _interopRequireDefault(require("./weex-picker"));
 
-var _locale = require("@rax-ui/locale");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -103,6 +99,2 @@
 
-  var locale = (0, _locale.useLocale)('Select', others, {
-    empty: '无可选项'
-  });
-
   if ('value' in props) {
@@ -117,8 +109,2 @@ setSelectValue(value);
 
-    if (!Array.isArray(data) || !data.length) {
-      _toast.default.show(locale.empty, 1200);
-
-      return;
-    }
-
     setVisible(true);
@@ -195,3 +181,4 @@ setRender(render + 1); // 迎合weex 强制渲染
         textAlign: inputAlign,
-        flex: 1
+        flex: 1,
+        textOverflow: 'ellipsis'
       };
@@ -198,0 +185,0 @@ return (0, _rax.createElement)(_raxView.default, {

lib/list.d.ts

@@ -19,3 +19,3 @@ /// <reference types="rax" />
 }
-declare const _default: import("@rax-types/rax").ForwardRefExoticComponent<Pick<CheckListPickerProps, "data" | "value" | "onHide" | "onChange" | "style" | "title" | "styles" | "locale" | "visible" | "view" | "multiple"> & import("@rax-types/rax").RefAttributes<any>>;
+declare const _default: import("@rax-types/rax").ForwardRefExoticComponent<Pick<CheckListPickerProps, "data" | "value" | "onHide" | "onChange" | "style" | "title" | "styles" | "visible" | "view" | "locale" | "multiple"> & import("@rax-types/rax").RefAttributes<any>>;
 export default _default;

lib/list.js

@@ -55,3 +55,4 @@ "use strict";
     ok: '确定',
-    cancel: '取消'
+    cancel: '取消',
+    empty: '无选项'
   });
@@ -72,3 +73,4 @@
       titleText: classNames('select__picker__title__text'),
-      content: classNames('select__picker__content')
+      content: Array.isArray(data) && data.length ? classNames('select__picker__content') : null,
+      emptyText: classNames('select__picker__text--empty')
     };
@@ -113,3 +115,3 @@ });
     style: styles.content
-  }, (0, _rax.createElement)(_raxScrollview.default, null, (0, _rax.createElement)(_checkList.default, _extends({}, others, {
+  }, Array.isArray(data) && data.length ? (0, _rax.createElement)(_raxScrollview.default, null, (0, _rax.createElement)(_checkList.default, _extends({}, others, {
     style: {
@@ -123,3 +125,5 @@ borderTopWidth: 0,
     onChange: handleChange
-  }))))));
+  }))) : (0, _rax.createElement)(_raxText.default, {
+    style: styles.emptyText
+  }, locale.empty))));
 };
@@ -126,0 +130,0 @@

lib/picker.d.ts

@@ -26,3 +26,3 @@ /// <reference types="rax" />
 }
-declare const _default: import("@rax-types/rax").ForwardRefExoticComponent<Pick<SelectPickerProps, "data" | "value" | "onHide" | "onChange" | "title" | "styles" | "locale" | "visible" | "view" | "cascade" | "onPickerChange"> & import("@rax-types/rax").RefAttributes<any>>;
+declare const _default: import("@rax-types/rax").ForwardRefExoticComponent<Pick<SelectPickerProps, "data" | "value" | "onHide" | "onChange" | "title" | "styles" | "visible" | "view" | "cascade" | "onPickerChange" | "locale"> & import("@rax-types/rax").RefAttributes<any>>;
 export default _default;

lib/picker.js

@@ -85,3 +85,4 @@ "use strict";
     ok: '确定',
-    cancel: '取消'
+    cancel: '取消',
+    empty: '无选项'
   });
@@ -101,3 +102,4 @@
       title: classNames('select__picker__title'),
-      titleText: classNames('select__picker__title__text')
+      titleText: classNames('select__picker__title__text'),
+      emptyText: classNames('select__picker__text--empty')
     };
@@ -113,6 +115,11 @@ });
     onHide();
-    onChange(!value || value.length === 0 ? getDefaultValue({
-      data: others.data,
-      cascade: others.cascade !== false
-    }) : value);
+    var data = props.data;
+
+    if (Array.isArray(data) && data.length) {
+      var val = !value || value.length === 0 ? getDefaultValue({
+        data: others.data,
+        cascade: others.cascade !== false
+      }) : value;
+      onChange(val);
+    }
   };
@@ -183,7 +190,9 @@
     type: "primary"
-  }, locale.ok)), (0, _rax.createElement)(_picker.default, _extends({}, others, {
+  }, locale.ok)), Array.isArray(props.data) && props.data.length ? (0, _rax.createElement)(_picker.default, _extends({}, others, {
     styles: stylesProp,
     value: value,
     onChange: handleChange
-  }))));
+  })) : (0, _rax.createElement)(_raxText.default, {
+    style: styles.emptyText
+  }, locale.empty)));
 };
@@ -190,0 +199,0 @@

lib/select.js

@@ -112,6 +112,2 @@ "use strict";
 
-      if (!Array.isArray(data) || !data.length) {
-        return null;
-      }
-
       return (0, _rax.createElement)(_picker.default, {
@@ -118,0 +114,0 @@ cascade: true,

lib/style/index.js

@@ -10,6 +10,6 @@ "use strict";
   return {
-    'select__picker': {
+    select__picker: {
       backgroundColor: Core['color-white']
     },
-    'select__picker__toolbar': {
+    select__picker__toolbar: {
       display: 'flex',
@@ -25,3 +25,3 @@ flexDirection: 'row',
     },
-    'select__picker__title': {
+    select__picker__title: {
       position: 'absolute',
@@ -36,3 +36,3 @@ left: '20%',
     },
-    'select__picker__title__text': {
+    select__picker__title__text: {
       fontSize: Core['font-size-subhead'],
@@ -47,4 +47,11 @@ color: Core['color-text1-4'],
     },
-    'select__picker__content': {
+    select__picker__content: {
       height: Core['s-12'] * 7
+    },
+    'select__picker__text--empty': {
+      marginTop: Core['s-8'],
+      marginBottom: Core['s-8'],
+      color: Core['color-text1-1'],
+      fontSize: Core['font-size-subhead'],
+      textAlign: 'center'
     }
@@ -51,0 +58,0 @@ };

package.json

 {
   "name": "@rax-ui/select",
-  "version": "1.0.0-beta.53",
+  "version": "1.0.0-beta.54",
   "description": "Rax UI Select",
@@ -23,10 +23,10 @@ "author": "jinli.lyy<[e-mail]>",
   "dependencies": {
-    "@rax-ui/button": "^1.0.0-beta.53",
-    "@rax-ui/check-list": "^1.0.0-beta.53",
-    "@rax-ui/drawer": "^1.0.0-beta.53",
-    "@rax-ui/list": "^1.0.0-beta.53",
-    "@rax-ui/locale": "^1.0.0-beta.53",
-    "@rax-ui/picker": "^1.0.0-beta.53",
-    "@rax-ui/styles": "^1.0.0-beta.53",
-    "@rax-ui/text-field": "^1.0.0-beta.53",
+    "@rax-ui/button": "^1.0.0-beta.54",
+    "@rax-ui/check-list": "^1.0.0-beta.54",
+    "@rax-ui/drawer": "^1.0.0-beta.54",
+    "@rax-ui/list": "^1.0.0-beta.54",
+    "@rax-ui/locale": "^1.0.0-beta.54",
+    "@rax-ui/picker": "^1.0.0-beta.54",
+    "@rax-ui/styles": "^1.0.0-beta.54",
+    "@rax-ui/text-field": "^1.0.0-beta.54",
     "rax-scrollview": "^1.0.4",
@@ -33,0 +33,0 @@ "rax-text": "^1.2.0",

src/base.tsx

@@ -14,6 +14,3 @@ import {
 import Text from 'rax-text';
-import Toast from '@rax-ui/toast';
 import WeexPicker from './weex-picker';
-import { useLocale, LocaledComponentProps } from '@rax-ui/locale';
-import { LocaleType } from './locale-type';
 
@@ -48,6 +45,3 @@ export enum TextFieldAlign {
 
-export interface SelectBaseProps
-  extends HTMLAttributesWeak,
-    StyledComponentProps<any>,
-    LocaledComponentProps<LocaleType> {
+export interface SelectBaseProps extends HTMLAttributesWeak, StyledComponentProps<any> {
   data?: any[];
@@ -120,4 +114,2 @@ label?: string;
 
-  const locale = useLocale<LocaleType>('Select', others, { empty: '无可选项' });
-
   if ('value' in props) {
@@ -131,6 +123,2 @@ setSelectValue(value);
     }
-    if (!Array.isArray(data) || !data.length) {
-      Toast.show(locale.empty, 1200);
-      return;
-    }
     setVisible(true);
@@ -195,2 +183,3 @@ setRender(render + 1); // 迎合weex 强制渲染
           flex: 1,
+          textOverflow: 'ellipsis',
         } as CSSProperties;
@@ -197,0 +186,0 @@ return (

src/list.tsx

@@ -1,7 +0,2 @@
-import {
-  createElement,
-  RefForwardingComponent,
-  forwardRef,
-  useState,
-} from 'rax';
+import { createElement, RefForwardingComponent, forwardRef, useState } from 'rax';
 import { StyledComponentProps, useStyles } from '@rax-ui/styles';
@@ -14,3 +9,3 @@ import Drawer from '@rax-ui/drawer';
 import CheckList from '@rax-ui/check-list';
-import { useLocale, LocaledComponentProps  } from '@rax-ui/locale';
+import { useLocale, LocaledComponentProps } from '@rax-ui/locale';
 import { SelectColumnData } from './picker';
@@ -50,3 +45,3 @@ import StyleProvider from './style';
 
-  const locale = useLocale<LocaleType>('Select', others, { ok: '确定', cancel: '取消' });
+  const locale = useLocale<LocaleType>('Select', others, { ok: '确定', cancel: '取消', empty: '无选项' });
 
@@ -64,3 +59,4 @@ if (preValue !== valueProp) {
       titleText: classNames('select__picker__title__text'),
-      content: classNames('select__picker__content'),
+      content: Array.isArray(data) && data.length ? classNames('select__picker__content') : null,
+      emptyText: classNames('select__picker__text--empty'),
     };
@@ -79,20 +75,33 @@ });
   return (
-    <Drawer placement="bottom"  view={view} styles={stylesProp} visible={visible} onMaskClick={onHide}>
+    <Drawer placement="bottom" view={view} styles={stylesProp} visible={visible} onMaskClick={onHide}>
       <View ref={ref} style={styles.picker}>
         <View style={styles.toolbar}>
-          <Button text styles={stylesProp} onClick={onHide} type="primary">{locale.cancel}</Button>
+          <Button text styles={stylesProp} onClick={onHide} type="primary">
+            {locale.cancel}
+          </Button>
           <View style={styles.title}>
             <Text style={styles.titleText}>{title}</Text>
           </View>
-          <Button text styles={stylesProp} onClick={handleSure} type="primary">{locale.ok}</Button>
+          <Button text styles={stylesProp} onClick={handleSure} type="primary">
+            {locale.ok}
+          </Button>
         </View>
         <View style={styles.content}>
-          <ScrollView >
-            <CheckList {...others} style={
-              {
-                borderTopWidth: 0,
-                borderBottomWidth: 0,
-              }
-            } styles={stylesProp} data={data} value={value} onChange={handleChange} />
-          </ScrollView>
+          {Array.isArray(data) && data.length ? (
+            <ScrollView>
+              <CheckList
+                {...others}
+                style={{
+                  borderTopWidth: 0,
+                  borderBottomWidth: 0,
+                }}
+                styles={stylesProp}
+                data={data}
+                value={value}
+                onChange={handleChange}
+              />
+            </ScrollView>
+          ) : (
+            <Text style={styles.emptyText}>{locale.empty}</Text>
+          )}
         </View>
@@ -99,0 +108,0 @@ </View>

src/picker.tsx

@@ -9,3 +9,3 @@ import { createElement, forwardRef, RefForwardingComponent, useState } from 'rax';
 import Picker from '@rax-ui/picker';
-import { useLocale, LocaledComponentProps  } from '@rax-ui/locale';
+import { useLocale, LocaledComponentProps } from '@rax-ui/locale';
 import StyleProvider from './style';
@@ -17,3 +17,3 @@ import { treeFilter } from './utils';
 declare global {
-  function  __weex_require__(s: string): any;
+  function __weex_require__(s: string): any;
 }
@@ -49,3 +49,6 @@
   } else {
-    return data.map((arr) => arr[0]).filter((v) => !!v).map((item) => item.value);
+    return data
+      .map((arr) => arr[0])
+      .filter((v) => !!v)
+      .map((item) => item.value);
   }
@@ -59,4 +62,3 @@ };
     title,
-    styles:
-    stylesProp,
+    styles: stylesProp,
     onChange = () => {},
@@ -71,3 +73,3 @@ onPickerChange = () => {},
 
-  const locale = useLocale<LocaleType>('Select', others, { ok: '确定', cancel: '取消' });
+  const locale = useLocale<LocaleType>('Select', others, { ok: '确定', cancel: '取消', empty: '无选项' });
 
@@ -85,2 +87,3 @@ if (preValue !== valueProp) {
       titleText: classNames('select__picker__title__text'),
+      emptyText: classNames('select__picker__text--empty'),
     };
@@ -96,10 +99,14 @@ });
     onHide();
-    onChange(
-      !value || value.length === 0 ?
-        getDefaultValue({
-          data: others.data,
-          cascade: others.cascade !== false,
-        }) :
-        value,
-    );
+    const { data } = props;
+
+    if (Array.isArray(data) && data.length) {
+      const val =
+        !value || value.length === 0
+          ? getDefaultValue({
+              data: others.data,
+              cascade: others.cascade !== false,
+            })
+          : value;
+      onChange(val);
+    }
   };
@@ -114,20 +121,23 @@
     if (visible) {
-      WeexPicker.pick({
-        items: (pickerData as SelectColumnData[]).map((item) => item.label),
-        confirmTitle: locale.ok,
-        cancelTitle: locale.cancel,
-        title,
-        titleColor: styles.titleText.color,
-        titleBackgroundColor: styles.toolbar.backgroundColor,
-        index: (pickerData as SelectColumnData[]).findIndex((item) => item.value === value[0]),
-      }, ({ result, data: i }) => {
-        if (result === 'success') {
-          const selectedItem = pickerData[i] as SelectColumnData;
-          setValue([selectedItem.value]);
-          onHide();
-          onChange([selectedItem.value]);
-        } else {
-          onHide();
+      WeexPicker.pick(
+        {
+          items: (pickerData as SelectColumnData[]).map((item) => item.label),
+          confirmTitle: locale.ok,
+          cancelTitle: locale.cancel,
+          title,
+          titleColor: styles.titleText.color,
+          titleBackgroundColor: styles.toolbar.backgroundColor,
+          index: (pickerData as SelectColumnData[]).findIndex((item) => item.value === value[0]),
+        },
+        ({ result, data: i }) => {
+          if (result === 'success') {
+            const selectedItem = pickerData[i] as SelectColumnData;
+            setValue([selectedItem.value]);
+            onHide();
+            onChange([selectedItem.value]);
+          } else {
+            onHide();
+          }
         }
-      });
+      );
     }
@@ -141,9 +151,17 @@ return null;
         <View style={styles.toolbar}>
-          <Button text styles={stylesProp} onClick={onHide} type="primary">{locale.cancel}</Button>
+          <Button text styles={stylesProp} onClick={onHide} type="primary">
+            {locale.cancel}
+          </Button>
           <View style={styles.title}>
             <Text style={styles.titleText}>{title}</Text>
           </View>
-          <Button text styles={stylesProp} onClick={handleSure} type="primary">{locale.ok}</Button>
+          <Button text styles={stylesProp} onClick={handleSure} type="primary">
+            {locale.ok}
+          </Button>
         </View>
-        <Picker {...others} styles={stylesProp} value={value} onChange={handleChange} />
+        {Array.isArray(props.data) && props.data.length ? (
+          <Picker {...others} styles={stylesProp} value={value} onChange={handleChange} />
+        ) : (
+          <Text style={styles.emptyText}>{locale.empty}</Text>
+        )}
       </View>
@@ -150,0 +168,0 @@ </Drawer>

src/select.tsx

@@ -90,6 +90,2 @@ import { createElement, RefForwardingComponent, forwardRef } from 'rax';
 
-        if (!Array.isArray(data) || !data.length) {
-          return null;
-        }
-
         return (
@@ -96,0 +92,0 @@ <Picker

src/style/index.ts

 import { StyleProviderFunction } from '@rax-ui/styles';
 
-const StyleProvider: StyleProviderFunction = (theme) =>  {
+const StyleProvider: StyleProviderFunction = (theme) => {
   const { Core = {} } = theme;
   return {
-    'select__picker': {
+    select__picker: {
       backgroundColor: Core['color-white'],
     },
-    'select__picker__toolbar': {
+    select__picker__toolbar: {
       display: 'flex',
@@ -20,3 +20,3 @@ flexDirection: 'row',
     },
-    'select__picker__title': {
+    select__picker__title: {
       position: 'absolute',
@@ -31,3 +31,3 @@ left: '20%',
     },
-    'select__picker__title__text': {
+    select__picker__title__text: {
       fontSize: Core['font-size-subhead'],
@@ -42,5 +42,12 @@ color: Core['color-text1-4'],
     },
-    'select__picker__content': {
+    select__picker__content: {
       height: Core['s-12'] * 7,
     },
+    'select__picker__text--empty': {
+      marginTop: Core['s-8'],
+      marginBottom: Core['s-8'],
+      color: Core['color-text1-1'],
+      fontSize: Core['font-size-subhead'],
+      textAlign: 'center',
+    },
   };
@@ -47,0 +54,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

54349

1.75%

Lines of code

1528

1.73%

Dependency changes

• Updated

  @rax-ui/button@^1.0.0-beta.54

• Updated

  @rax-ui/check-list@^1.0.0-beta.54

• Updated

  @rax-ui/drawer@^1.0.0-beta.54

• Updated

  @rax-ui/list@^1.0.0-beta.54

• Updated

  @rax-ui/locale@^1.0.0-beta.54

• Updated

  @rax-ui/picker@^1.0.0-beta.54

• Updated

  @rax-ui/styles@^1.0.0-beta.54

• Updated

  @rax-ui/text-field@^1.0.0-beta.54