@macrostrat/column-components/dist/editor/facies/swatch.js

React rendering primitives for stratigraphic columns

import { Component } from "react";
import { RaisedSelect } from "../util.js";
import h from "../main.module.scss.js";
import { FaciesContext } from "../../context/facies.js";
const FaciesRow = ({ facies }) => h("span.facies-picker-row", [
  h(BasicFaciesSwatch, { facies, className: "facies-color-swatch" }),
  h("span.facies-picker-name", facies.name)
]);
class FaciesPicker extends Component {
  static contextType = FaciesContext;
  render() {
    const { facies } = this.context;
    const { interval, onChange } = this.props;
    const options = facies.map((f) => ({
      value: f.id,
      label: h(FaciesRow, { facies: f })
    }));
    let value = options.find((d) => d.value === interval.facies);
    if (value == null) {
      value = null;
    }
    return h(RaisedSelect, {
      id: "facies-select",
      options,
      value,
      selected: interval.facies,
      isClearable: true,
      onChange(res) {
        console.log("Changing", res);
        const f = res != null ? res.value : null;
        return onChange(f);
      }
    });
  }
}
const BasicFaciesSwatch = ({ facies: d, ...rest }) => h("div.color-swatch", {
  style: {
    backgroundColor: d.color || "black",
    width: "2em",
    height: "2em"
  },
  ...rest
});
function FaciesSwatch(props) {
  const { facies, isEditable = false } = props;
  return h(BasicFaciesSwatch, { facies });
}
export {
  BasicFaciesSwatch,
  FaciesPicker,
  FaciesSwatch
};
//# sourceMappingURL=swatch.js.map