qiniu / formstate-x

Manage state of form with ease.
https://qiniu.github.io/formstate-x
MIT License
34 stars 10 forks source link

disable & disable validation #17

Closed nighca closed 2 years ago

nighca commented 4 years ago

disable

Disable almost all behaviors of the (field / form) state. We expect that the corresponding UI will be invisible or disabled.

disable validation

Disable validation behavior of the (field / form) state. The corresponding UI may still be visible and active.


The current method disableValidationWhen actually fits the first case: disable. We should check if the second case is actually reasonable. If so, maybe another method should be provided for such case. It may introduce some context-like thing.


Related issues: #8

nighca commented 3 years ago

@Luncher 求补充需要 disable validation 的 case

Luncher commented 3 years ago

遇到的大多数情况下,formstate 的组织形式一定程度上都反应了页面结构的组织形式。第一个 case 比较常见一些。不过有些时候会把整个 formstatedisable 掉,但是 部分 UI 是可见的。譬如:

image

We expect that the corresponding UI will be invisible or disabled

感觉 formstate 应该不用关心 UI 是否可见等状态啊,为啥一定要区分这两种状态呢?

nighca commented 3 years ago

不过有些时候会把整个 formstatedisable 掉,但是 部分 UI 是可见的。譬如:

image

@Luncher 是指哪部分 UI?

感觉 formstate 应该不用关心 UI 是否可见等状态啊,为啥一定要区分这两种状态呢?

这两种状态可能对应两种需求,搞清楚需求才好针对去满足

Luncher commented 3 years ago

image

这个例子可能不太恰当,这里的 Switch 是可见的,但是它们对应的 formstate 是 disable 的。

nighca commented 3 years ago

哦明白,感觉更合理的逻辑是:

const enableState = new FieldState(false) // 对应 UI Switch

const configState = new FormState({
  type: new FieldState(''),
  // ...
}).disableValidationWhen(() => !enableState.value)

return new FormState({
  enable: enableState,
  config: configState
})

因为 enable: false 的时候,enable field 本身对应的 Switch 其实是不预期被 disable validation 的?

Luncher commented 3 years ago

哦明白,感觉更合理的逻辑是:

const enableState = new FieldState(false) // 对应 UI Switch

const configState = new FormState({
  type: new FieldState(''),
  // ...
}).disableValidationWhen(() => !enableState.value)

return new FormState({
  enable: enableState,
  config: configState
})

因为 enable: false 的时候,enable field 本身对应的 Switch 其实是不预期被 disable validation 的?

是这个意思,因为实际的 formstate 可能是这样的:

return new FormState({
  enable: enableState,
  config: configState
  config2: config2State
})

便(tou)捷(lan)的方式是直接 disable formstate,而不是分别 disable config1/2

nighca commented 2 years ago

Maybe disabled -> suspended

v. 悬浮;暂停;悬挂;停止 网络 挂起;停赛;挂起状态

A thread cannot be suspended if it has not been started or if it has stopped.

如果线程尚未启动或已经停止,则它将不能挂起。

Earlier, Ugandan MPs voted unanimously to call on three senior government ministers, including the prime minister, to be suspended.

早些时候,乌干达国会一致同意将包括总理在内的三名政府高级部长停职。

And Boston's transit authority said all bus, subway and commuter rail service would be suspended all day Sunday.

波士顿临时市政府说,一切公交、地铁和通勤火车周六全天将暂时停运。

Like the standard TIE, the interceptor has a ball-shaped single-pilot cockpit suspended between a pair of bracing arms.

跟标准的TIE战斗机一样,截击机的球形单人驾驶舱悬挂在一对支撑臂中间。

nighca commented 2 years ago

是这个意思,因为实际的 formstate 可能是这样的:

return new FormState({
  enable: enableState,
  config: configState
  config2: config2State
})

便(tou)捷(lan)的方式是直接 disable formstate,而不是分别 disable config1/2

@Luncher 可能不会把这种“偷懒”的方式视作正常的用法,毕竟这么做之后,会有潜在的风险:如果 enableState 也有对应的校验逻辑,这个校验逻辑就不会生效;把不应 disable 的 state 标记为 disable 这本身是不合理的

尤其在有 ProxyState 之后,我们可以做到 state 内部层级的增加不会影响外部使用的便利

nighca commented 2 years ago

参考 DebouncedState & ProxyState,沿着 Composition 的思路考虑的话,一个开脑洞的做法:

formstate-x 提供一个 ConditionalState

class ConditionalState implements IState { ... }

上边例子的实现代码就是这样的:

const enableState = new FieldState(false) // 对应 UI Switch

const configState = new FormState({
  type: new FieldState(''),
  // ...
})

return new FormState({
  enable: enableState,
  config: new ConditionalState(configState, () => enableState.value)
})

好处是 disable validation 相关方法及逻辑都可以从 IState 及实现 IState 的类上干掉了;

缺点是像 DebouncedState / ProxyState 那样,消费里边的内容(比如 form state 的 fields)的时候会多一层 $(不过这个也许是可以避免的,比如 ConditionalState.prototype.$ 就直接返回被它包的 state 的 $