javascript - 是的，根据 parent 的 sibling (parent.parent)使用不同的模式

Question

在架构中，我想根据父级的 sibling 调整架构。

例如:如果 toggleMonday 为真，那么 weekdays -> monday 应该有一个特定的验证模式。

现在下面的例子有效。但是，它非常冗长。

const schema = yup.object().shape({
  toggleMonday: yup.bool().required(),
  toggleTuesday: yup.bool().required(),
  toggleWednesday: yup.bool().required(),
  toggleThursday: yup.bool().required(),
  toggleFriday: yup.bool().required(),
  toggleSaturday: yup.bool().required(),
  toggleSunday: yup.bool().required(),
  weekdays: yup.object()
   // works, toggleMonday is a sibling of weekdays
   .when('toggleMonday', {
        is: true,
        then: yup.object().shape({
          monday: yup.array().of(yup.object().shape(daySchema)).daySchemaFirstTimeslotRequired(),
          tuesday: yup.array().of(yup.object().shape(daySchema)),
          wednesday: yup.array().of(yup.object().shape(daySchema)),
          thursday: yup.array().of(yup.object().shape(daySchema)),
          friday: yup.array().of(yup.object().shape(daySchema)),
          saturday: yup.array().of(yup.object().shape(daySchema)),
          sunday: yup.array().of(yup.object().shape(daySchema)),
        }),
      })
      .when('toggleTuesday', {
        is: true,
        then: yup.object().shape({
          monday: yup.array().of(yup.object().shape(daySchema)),
          tuesday: yup.array().of(yup.object().shape(daySchema)).daySchemaFirstTimeslotRequired(),
          wednesday: yup.array().of(yup.object().shape(daySchema)),
          thursday: yup.array().of(yup.object().shape(daySchema)),
          friday: yup.array().of(yup.object().shape(daySchema)),
          saturday: yup.array().of(yup.object().shape(daySchema)),
          sunday: yup.array().of(yup.object().shape(daySchema)),
        }),
      })
      // etc.
});

如您所见，它非常重复。
mixed.when()本例使用方法。但是，您似乎只能定位兄弟或兄弟子字段。

将其分别嵌套在每一天下不起作用，因为这些天嵌套在“工作日”中。

类似的东西:

const schema = yup.object().shape({
  toggleMonday: yup.bool().required(),
  toggleTuesday: yup.bool().required(),
  toggleWednesday: yup.bool().required(),
  toggleThursday: yup.bool().required(),
  toggleFriday: yup.bool().required(),
  toggleSaturday: yup.bool().required(),
  toggleSunday: yup.bool().required(),
  weekdays: yup.object()
    // does not work, toggleMonday is not a sibling of 'monday'
    monday: yup.array().when('toggleMonday', {
      is: true,
      then: yup.array().of(yup.object().shape(daySchema)).daySchemaFirstTimeslotRequired(),
      otherwise: yup.array().of(yup.object().shape(daySchema)),
    }),
    tuesday: yup.array().when('toggleMonday', {
      is: true,
      then: yup.array().of(yup.object().shape(daySchema)).daySchemaFirstTimeslotRequired(),
      otherwise: yup.array().of(yup.object().shape(daySchema)),
    }),
    // etc.
});

有什么建议吗？

Answer 1

是的，为您提供了一个声明式 api，但您不仅限于编写这样的巨大对象文字。您的架构相当复杂，但如果没有其他方法可以更改它，请考虑以编程方式编写它 -

const weekdays =
  [ 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday' ]

const schema = yup.object().shape({
  toggleMonday: yup.bool().required(),
  toggleTuesday: yup.bool().required(),
  toggleWednesday: yup.bool().required(),
  toggleThursday: yup.bool().required(),
  toggleFriday: yup.bool().required(),
  toggleSaturday: yup.bool().required(),
  toggleSunday: yup.bool().required(),
  weekdays: weekdays.reduce(whenToggle, yup.object())
})

现在我们只需要实现 whenToggle -

const day =
  yup.object().shape(daySchema)

const title = (str = "") =>
  str.substr(0,1).toUpperCase() + str.substr(1)

const whenToggle = (y = {}, day = "") =>
  y.when
    ( `toggle${title(day)}`
    , { is: true, then: yup.object().shape(firstTimeslot(day)) }
    )

最后执行 firstTimeslot -

const dayList =
  yup.array().of(day)

const firstTimeslot = (day = "") =>
  weekdays.reduce
    ( (r, d) =>
        d === day
          ? { ...r, [d]: dayList.daySchemaFirstTimeslotRequired() }
          : { ...r, [d]: dayList }
    , {}
    )