@signalplus/params-about 0.1.0 → 0.1.1

package/README-CN.md

@@ -1,9 +1,6 @@
 # @signalplus/params-about
-[![NPM Version](http://img.shields.io/npm/v/@signalplus/params-about.svg?style=flat-square)](https://www.npmjs.com/package/@signalplus/params-about)
-[![Download Month](http://img.shields.io/npm/dm/@signalplus/params-about.svg?style=flat-square)](https://www.npmjs.com/package/@signalplus/params-about)
-![gzip with dependencies: kb](https://img.shields.io/badge/gzip--with--dependencies-kb-brightgreen.svg "gzip with dependencies: kb")
-![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
-![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")
+
+[![NPM Version](http://img.shields.io/npm/v/@signalplus/params-about.svg?style=flat-square)](https://www.npmjs.com/package/@signalplus/params-about) [![Download Month](http://img.shields.io/npm/dm/@signalplus/params-about.svg?style=flat-square)](https://www.npmjs.com/package/@signalplus/params-about) ![gzip with dependencies: kb](https://img.shields.io/badge/gzip--with--dependencies-kb-brightgreen.svg 'gzip with dependencies: kb') ![typescript](https://img.shields.io/badge/typescript-supported-blue.svg 'typescript') ![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg 'pkg.module')
 
 > `pkg.module supported`, 天然支持 tree-shaking, 使用 es module 引用即可
 
@@ -13,11 +10,10 @@ A description for the module
 
 ## repository
 
-
 ## Demo
 
-
 ## Run Example
+
 你可以通过运行项目的 example 来了解这个组件的使用，以下是启动步骤：
 
 1. 克隆项目到本地 `git clone `
@@ -27,49 +23,58 @@ A description for the module
 5. 在你的浏览器看 example (地址通常是 `http://127.0.0.1:3000/examples/test.html`)
 
 ## Installation
+
 ```bash
 npm i -S @signalplus/params-about
 ```
 
 ## Global name - The variable the module exported in `umd` bundle
+
 `ParamsAbout`
 
 ## Interface
+
 去 [index.d.ts](./index.d.ts) 查看可用方法和参数
 
 ## Usage
+
 ```js
-import * as ParamsAbout from '@signalplus/params-about'
+import * as ParamsAbout from '@signalplus/params-about';
 ```
 
 ## CDN
+
 在 HTML 文件中直接引用，你可以在 [CDN: unpkg](https://unpkg.com/@signalplus/params-about/lib/umd/) 看到你能用到的所有 js 脚本
+
 ```html
 <-- 然后使用你需要的 -->
 <script src="https://unpkg.com/@signalplus/params-about/lib/umd/<--module-->.js"></script>
 ```
 
 或者，你也可以使用 [CDN: jsdelivr](https://cdn.jsdelivr.net/npm/@signalplus/params-about/lib/umd/) 看到你能用到的所有 js 脚本
+
 ```html
 <script src="https://cdn.jsdelivr.net/npm/@signalplus/params-about/lib/umd/<--module-->.js"></script>
 ```
 
 ## style
+
 你可能需要主动引入样式文件来应用组件的样式：
+
 ```js
 // scss
-import '@signalplus/params-about/lib/css/index.scss'
+import '@signalplus/params-about/lib/css/index.scss';
 
 // css
-import '@signalplus/params-about/lib/css/index.css'
+import '@signalplus/params-about/lib/css/index.css';
 ```
+
 Or
+
 ```scss
 // scss
-@import '~@signalplus/params-about/lib/css/index.scss'
-
-// css
-@import '~@signalplus/params-about/lib/css/index.css'
+@import '~@signalplus/params-about/lib/css/index.scss' // css
+  @import '~@signalplus/params-about/lib/css/index.css';
 ```
 
 你也可以通过引入自定义的组件样式文件来自定义样式，文件可以通过复制并修改 `node_modules/@signalplus/params-about/lib/css/index.scss` 得到

package/README.md

@@ -1,9 +1,6 @@
 # @signalplus/params-about
-[![NPM Version](http://img.shields.io/npm/v/@signalplus/params-about.svg?style=flat-square)](https://www.npmjs.com/package/@signalplus/params-about)
-[![Download Month](http://img.shields.io/npm/dm/@signalplus/params-about.svg?style=flat-square)](https://www.npmjs.com/package/@signalplus/params-about)
-![gzip with dependencies: kb](https://img.shields.io/badge/gzip--with--dependencies-kb-brightgreen.svg "gzip with dependencies: kb")
-![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
-![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")
+
+[![NPM Version](http://img.shields.io/npm/v/@signalplus/params-about.svg?style=flat-square)](https://www.npmjs.com/package/@signalplus/params-about) [![Download Month](http://img.shields.io/npm/dm/@signalplus/params-about.svg?style=flat-square)](https://www.npmjs.com/package/@signalplus/params-about) ![gzip with dependencies: kb](https://img.shields.io/badge/gzip--with--dependencies-kb-brightgreen.svg 'gzip with dependencies: kb') ![typescript](https://img.shields.io/badge/typescript-supported-blue.svg 'typescript') ![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg 'pkg.module')
 
 > `pkg.module supported`, which means that you can apply tree-shaking in you project
 
@@ -13,11 +10,10 @@ A description for the module
 
 ## repository
 
-
 ## Demo
 
-
 ## Run Example
+
 you can see the usage by run the example of the module, here is the step:
 
 1. Clone the library `git clone `
@@ -27,49 +23,58 @@ you can see the usage by run the example of the module, here is the step:
 5. See the example(usually is `http://127.0.0.1:3000/examples/test.html`) in your browser
 
 ## Installation
+
 ```bash
 npm i -S @signalplus/params-about
 ```
 
 ## Global name - The variable the module exported in `umd` bundle
+
 `ParamsAbout`
 
 ## Interface
+
 See what method or params you can use in [index.d.ts](./index.d.ts)
 
 ## Usage
+
 ```js
-import * as ParamsAbout from '@signalplus/params-about'
+import * as ParamsAbout from '@signalplus/params-about';
 ```
 
 ## CDN
+
 Use in html, see what you can use in [CDN: unpkg](https://unpkg.com/@signalplus/params-about/lib/umd/)
+
 ```html
 <-- use what you want -->
 <script src="https://unpkg.com/@signalplus/params-about/lib/umd/<--module-->.js"></script>
 ```
 
 Or，see what you can use in [CDN: jsdelivr](https://cdn.jsdelivr.net/npm/@signalplus/params-about/lib/umd/)
+
 ```html
 <script src="https://cdn.jsdelivr.net/npm/@signalplus/params-about/lib/umd/<--module-->.js"></script>
 ```
 
 ## style
+
 For building style, you may need to import the css or scss file:
+
 ```js
 // scss
-import '@signalplus/params-about/lib/css/index.scss'
+import '@signalplus/params-about/lib/css/index.scss';
 
 // css
-import '@signalplus/params-about/lib/css/index.css'
+import '@signalplus/params-about/lib/css/index.css';
 ```
+
 Or
+
 ```scss
 // scss
-@import '~@signalplus/params-about/lib/css/index.scss'
-
-// css
-@import '~@signalplus/params-about/lib/css/index.css'
+@import '~@signalplus/params-about/lib/css/index.scss' // css
+  @import '~@signalplus/params-about/lib/css/index.css';
 ```
 
 Or, you can build your custom style by copying, editing and importing `node_modules/@signalplus/params-about/lib/css/index.scss`

package/index.d.ts

@@ -1,114 +1,189 @@
-import React, { PureComponent } from 'react'
+import React, { PureComponent, ComponentProps } from 'react';
+import ReactGlobalComp from 'react-global-comp';
 
 declare enum ParamType {
-  ParamGroup = -1,
-  Number = 1,
-  Percentage = 2,
-  Bool = 3,
-  NumberRange = 4,
-  PercentageRange = 5,
-  ExpiryLimit = 6,
-  Expiry = 7,
-  Phone = 8,
+    ParamGroup = -1,
+    Number = 1,
+    Percentage = 2,
+    Bool = 3,
+    NumberRange = 4,
+    PercentageRange = 5,
+    ExpiryLimit = 6,
+    Expiry = 7,
+    Phone = 8
 }
 interface BaseInputProps {
-  value?: any
-  onChange?(val: any): void
-  readonly?: boolean
-  className?: string
-  style?: any
-  [key: string]: any
+    value?: any;
+    onChange?(val: any): void;
+    onBlur?(): void;
+    readonly?: boolean;
+    className?: string;
+    style?: any;
+    [key: string]: any | undefined | null;
 }
 interface ValidateInfo {
-  [key: string]: undefined | string | ValidateInfo
+    [key: string]: undefined | string | ValidateInfo;
 }
 
 interface ParamValueStruct {
-  valueId?: string
-  [key: string]: any
+    valueId?: string;
+    [key: string]: any;
 }
 interface ParamRendererProps extends BaseInputProps {
-  valueType: ParamType
-  value?: ParamValueStruct
-  onChange?(val: ParamValueStruct): void
+    valueType?: ParamType;
+    value?: ParamValueStruct;
+    onChange?(val: ParamValueStruct): void;
 }
 declare class ParamRenderer extends PureComponent<ParamRendererProps> {
-  get typeConfig(): {
-    name: string
-    key?: string | undefined
-    defaultValue?: any
-    Comp: React.ComponentType<BaseInputProps>
-    validator?(
-      value: any,
-      enableEmpty?: boolean | undefined,
-    ): string | ValidateInfo | undefined
-  }
-  get value(): any
-  onChange: (val: any) => void
-  render(): JSX.Element
+    get typeConfig(): {
+        name: string;
+        key?: string | undefined;
+        defaultValue?: any;
+        Comp: React.ComponentType<BaseInputProps>;
+        validator?(value: any): string;
+    };
+    get value(): any;
+    onChange: (val: any) => void;
+    render(): JSX.Element;
 }
 
-declare const ParamTypeConfig: Record<
-  ParamType,
-  {
-    name: string
-    key?: string
-    defaultValue?: any
-    Comp: React.ComponentType<BaseInputProps>
-    validator?(value: any, enableEmpty?: boolean): ValidateInfo['key']
-  }
->
+interface ParentSelectorOption {
+    label: string;
+    value: string;
+    children?: ParentSelectorOption[];
+}
+interface ParentSelectorProps extends BaseInputProps {
+    parentOptions?: ParentSelectorOption[];
+    value?: string;
+    onChange?(val: string): void;
+}
 
-declare function formatNum(val: string): number | undefined
-declare function isNullLike(val: any): val is undefined | null
-declare function emptyValidator(
-  val: any,
-  enableEmpty?: boolean,
-): 'should not be empty' | ''
-declare function numRangeValidator(
-  val: {
-    min?: string
-    max?: string
-  },
-  enableEmpty?: boolean,
-):
-  | ''
-  | 'Max should bigger than Min'
-  | {
-      min: string
-      max?: undefined
-    }
-  | {
-      max: string
-      min?: undefined
-    }
-declare function expiryValidator(
-  val: string,
-  enableEmpty?: boolean,
-): 'should not be empty' | '' | 'out of format'
-declare function expiriesValidator(
-  val: string[],
-  enableEmpty?: boolean,
-):
-  | string
-  | {
-      [x: number]: string
-    }
-declare function isExpired(val?: string): boolean
+interface ParamFormData {
+    parentId?: string;
+    paramId?: string;
+    key: string;
+    name?: string;
+    valueType: ParamType;
+    defaultValue?: {
+        valueId?: string;
+        [key: string]: any;
+    };
+    description?: string;
+}
+interface ParamFormProps {
+    parentOptions: ParentSelectorProps['parentOptions'];
+    expiriesOptions: string[];
+    initialValues?: ParamFormData;
+    onChange?(data: ParamFormData): void;
+    onSubmit?(data: ParamFormData): Promise<any>;
+}
+declare class ParamForm extends PureComponent<ParamFormProps> {
+    ref: React.RefObject<any>;
+    formItems: {
+        label: string;
+        name: string;
+        Comp: React.ComponentType<BaseInputProps>;
+        required?: boolean;
+        validator?(_: any, val: any): Promise<any>;
+    }[];
+    onChange: (changed: any, data: any) => void;
+    render(): JSX.Element;
+}
+declare class ParamFormModalEl extends PureComponent<ParamFormProps & Required<Pick<ParamFormProps, 'onSubmit'>>> {
+    ref: React.RefObject<ParamForm>;
+    state: {
+        visible: boolean;
+    };
+    onShow: () => void;
+    onHide: () => void;
+    onSubmit: () => any;
+    render(): JSX.Element;
+}
+declare class ParamFormModal {
+    static el: ReactGlobalComp<ParamFormProps & Required<Pick<ParamFormProps, "onSubmit">>>;
+    static show(props: Omit<ComponentProps<typeof ParamFormModalEl>, 'visible'>): Promise<void>;
+    static hide(): Promise<void>;
+}
 
-export {
-  BaseInputProps,
-  ParamRenderer,
-  ParamRendererProps,
-  ParamType,
-  ParamTypeConfig,
-  ParamValueStruct,
-  ValidateInfo,
-  emptyValidator,
-  expiriesValidator,
-  expiryValidator,
-  formatNum,
-  isExpired,
-  isNullLike,
-  numRangeValidator,
+interface ParamValueEditorData {
+    paramId: string;
+    description?: string;
+    valueBefore: {
+        valueId?: string;
+        [key: string]: any;
+    };
+    value?: {
+        valueId?: string;
+        [key: string]: any;
+    };
 }
+interface ParamValueEditorProps {
+    allParams: ParentSelectorProps['parentOptions'];
+    expiriesOptions: string[];
+    valueType: ParamType;
+    initialValues: ParamValueEditorData;
+    onChange?(data: ParamValueEditorData): void;
+    onSubmit?(data: ParamValueEditorData): Promise<any>;
+}
+declare class ParamValueEditor extends PureComponent<ParamValueEditorProps> {
+    ref: React.RefObject<any>;
+    formItems: {
+        label: string;
+        name: string;
+        Comp: React.ComponentType<BaseInputProps>;
+        required?: boolean;
+        validator?(_: any, val: any): Promise<any>;
+    }[];
+    onChange: (changed: any, data: any) => void;
+    render(): JSX.Element;
+}
+declare class ParamValueEditorModalEl extends PureComponent<ParamValueEditorProps & Required<Pick<ParamValueEditorProps, 'onSubmit'>>> {
+    ref: React.RefObject<ParamValueEditor>;
+    state: {
+        visible: boolean;
+    };
+    onShow: () => void;
+    onHide: () => void;
+    onSubmit: () => any;
+    render(): JSX.Element;
+}
+declare class ParamValueEditorModal {
+    static el: ReactGlobalComp<ParamValueEditorProps & Required<Pick<ParamValueEditorProps, "onSubmit">>>;
+    static show(props: Omit<ComponentProps<typeof ParamValueEditorModalEl>, 'visible'>): Promise<void>;
+    static hide(): Promise<void>;
+}
+
+declare const ParamTypeConfig: Record<ParamType, {
+    name: string;
+    key?: string;
+    defaultValue?: any;
+    Comp: React.ComponentType<BaseInputProps>;
+    validator?(value: any): string;
+}>;
+declare function paramValidator(val: any, values: {
+    valueType: ParamType;
+}): string;
+declare const ParamTypeOptions: {
+    value: string;
+    label: string;
+    name: string;
+    key?: string | undefined;
+    defaultValue?: any;
+    Comp: React.ComponentType<BaseInputProps>;
+    validator?(value: any): string;
+}[];
+
+declare function formatNum(val: string): number | undefined;
+declare function isNullLike(val: any): val is undefined | null;
+declare function emptyValidator(val: any, enableEmpty?: boolean): "Should not be empty" | "";
+declare function numRangeValidator(val: {
+    min?: string;
+    max?: string;
+}, enableEmpty?: boolean): string;
+declare function expiryValidator(val: string, enableEmpty?: boolean): "Should not be empty" | "" | "Out of format";
+declare function expiriesValidator(val: string[]): string;
+declare function keyValidator(val: string): string;
+declare function isExpired(val?: string): boolean;
+declare function validatorCvt(validator: (val: any, values: any) => ValidateInfo['string'], form?: () => any): (_: any, val: any) => Promise<any>;
+
+export { BaseInputProps, ParamForm, ParamFormData, ParamFormModal, ParamFormProps, ParamRenderer, ParamRendererProps, ParamType, ParamTypeConfig, ParamTypeOptions, ParamValueEditor, ParamValueEditorData, ParamValueEditorModal, ParamValueEditorModalEl, ParamValueEditorProps, ParamValueStruct, ValidateInfo, emptyValidator, expiriesValidator, expiryValidator, formatNum, isExpired, isNullLike, keyValidator, numRangeValidator, paramValidator, validatorCvt };

package/lib/css/Bool.scss

@@ -0,0 +1,19 @@
+@import "./var";
+
+.param-bool {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: $input-height;
+}
+
+.param-bool-option {
+  display: inline-flex;
+  align-items: center;
+  margin: 0 16px 0 0;
+  cursor: pointer;
+
+  > svg {
+    margin: 0 5px 0 0;
+  }
+}

package/lib/css/Expiries.scss

@@ -0,0 +1,108 @@
+@import "./var";
+
+.param-expiries {
+  position: relative;
+  flex: 1;
+  max-width: 100%;
+  min-width: calc(7em + 24px + 2px);
+  height: $input-height;
+  padding: 0 calc(1em + 14px) 0 10px;
+  line-height: 0;
+  border: 1px solid $border-color;
+  border-radius: 2px;
+  cursor: pointer;
+
+  &.readonly {
+    padding: 0;
+    border-color: transparent;
+    overflow: initial;
+    white-space: initial;
+    cursor: default;
+  }
+
+  &.multiple {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+
+.param-expiries-arrow {
+  position: absolute;
+  top: 50%;
+  right: 7px;
+  margin: -0.5em 0 0;
+  color: $border-color !important;
+}
+
+.param-expiries-val {
+  display: inline-block;
+  margin: 9px 6px 0 0;
+  line-height: 20px;
+}
+
+.param-expiries-placeholder {
+  display: inline-block;
+  margin: 9px 6px 0 0;
+  line-height: 20px;
+  color: $placeholder-color;
+  max-width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.param-expiries-multi-val {
+  display: inline-block;
+  margin: 9px 6px 0 0;
+  padding: 0 3px 0 8px;
+  line-height: 20px;
+  border-radius: 2px;
+  background: rgba(0, 0, 0, 0.1);
+
+  svg {
+    display: inline-block;
+    margin: 0 0 0 4px;
+    color: #999;
+    cursor: pointer;
+  }
+}
+
+.param-expiries-popover {
+
+  .ant-popover-inner-content {
+    max-height: 50vh;
+    overflow-y: auto;
+  }
+}
+
+.param-expiries-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 240px;
+  margin: 0 -16px;
+  padding: 0 16px;
+  line-height: 30px;
+  color: rgba($text-color, 0.6);
+  cursor: pointer;
+
+  &.param-expiries-option-checked {
+    font-weight: bold;
+    color: $text-color;
+  }
+
+  &.param-expiries-option-disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &:hover {
+    color: $text-color;
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  svg {
+    color: #57be6a;
+  }
+}

package/lib/css/ExpiriesLimit.scss

@@ -0,0 +1,80 @@
+@import "./var";
+
+.param-expiries-limit {
+  padding: calc((#{$input-height} - 20px) / 2) 0;
+
+  .param-number-range {
+    margin: 0 0 0 10px;
+  }
+
+  .param-number-range-prefix {
+    display: none;
+  }
+
+  .param-number-suffix {
+    padding: 0 7px;
+  }
+}
+
+.param-expiries-limit-val {
+  display: block;
+
+  &:after {
+    content: ';'
+  }
+}
+
+.param-expiries-limit-val-sep {
+  padding: 0 4px;
+  color: #999;
+}
+
+.param-expiries-limit-inputs {
+  display: grid;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  grid-template-rows: auto;
+  grid-template-columns: auto auto auto auto;
+
+  .param-expiries, .param-number-range, .param-arr-ops {
+    height: 30px;
+    margin: 0;
+
+    &.readonly {
+      height: 20px;
+      line-height: 18px;
+
+      .param-expiries-val {
+        margin-top: 0;
+      }
+    }
+
+    .param-expiries-placeholder, .param-expiries-val {
+      margin-top: 4px;
+    }
+
+    .param-number-range-sep {
+      margin: 0 6px;
+    }
+  }
+
+  .param-arr-ops {
+    padding: 0;
+  }
+
+  //.param-arr-ops:nth-child(8):last-child {
+  //
+  //  .param-arr-ops-del {
+  //    visibility: hidden;
+  //    pointer-events: none;
+  //  }
+  //}
+}
+
+.param-expiries-popover {
+  padding: 0 !important;
+
+  .ant-popover-arrow {
+    display: none;
+  }
+}