import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    blockquote: "blockquote",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["Solid поддерживает кастомные директивы (", jsx(_components.code, {
        children: "custom directives"
      }), ") через суффикс ", jsx(_components.code, {
        children: "use:"
      }), ". Это упрощенная форма использования ", jsx(_components.code, {
        children: "ref"
      }), ", но запись через ", jsx(_components.code, {
        children: "use:"
      }), " позволяет нам использовать несколько байндингов на одном элементе без конфликтов и внешне напоминает паттерны директив из других популярных библиотек. Директива ", jsx(_components.code, {
        children: "use:"
      }), " отлично подходит для создания переиспользуемых паттернов поведения для элементов DOM."]
    }), "\n", jsxs(_components.p, {
      children: ["Кастомные директивы это функции, которые принимают два аргумента: ", jsx(_components.code, {
        children: "element"
      }), " и ", jsx(_components.code, {
        children: "valueAccessor"
      }), ". ", jsx(_components.code, {
        children: "Element"
      }), " это DOM элемент на который мы хотим повесить ", jsx(_components.code, {
        children: "use:"
      }), ", а ", jsx(_components.code, {
        children: "valueAccessor"
      }), " это функция-геттер (", jsx(_components.code, {
        children: "getter function"
      }), ") для значения, которое мы передаем в атрибут. Мы можем использовать  функция-директивы в любом месте в нашем JSX, достаточно просто сделать импорт и добавить её в ", jsx(_components.code, {
        children: "use:"
      }), "."]
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: ["Важно! Функция ", jsx(_components.code, {
          children: "use:"
        }), " определяется компилятором для трансформации, поэтому импорт функции должен быть в скоупе (", jsx(_components.code, {
          children: "scope"
        }), ") и не может быть частью расширений (", jsx(_components.code, {
          children: "spreads"
        }), ") или использоваться на компонентах."]
      }), "\n"]
    }), "\n", jsxs(_components.p, {
      children: ["В нашем примере мы создадим простую директиву с логикой для клика за пределы компонента. Это распространенный вариант поведения для модальных или всплывающих окон (", jsx(_components.code, {
        children: "popups"
      }), "). Для начала мы должны импортировать и применить нашу директиву к элементу:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " clickOutside ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'./click-outside.tsx'"
        }), "\n\n<div ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "class"
        }), "=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"modal\""
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "use"
        }), ":clickOutside={", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setShow"
        }), "(", jsx(_components.span, {
          className: "hljs-literal",
          children: "false"
        }), ")}>\n  ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Some"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Modal"
        }), "\n</div>\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Открываем файл ", jsx(_components.code, {
        children: "click-outside.tsx"
      }), ", где мы будем писать нашу пользовательскую директиву. Эта директива будет определять поведение на клике в body и на очищении компонента:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "default"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "clickOutside"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "el, accessor"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onClick"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "e"
        }), ") => !el.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "contains"
        }), "(e.", jsx(_components.span, {
          className: "hljs-property",
          children: "target"
        }), ") && ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "accessor"
        }), "()?.();\n  ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "body"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "addEventListener"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"click\""
        }), ", onClick);\n\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onCleanup"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "body"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "removeEventListener"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"click\""
        }), ", onClick));\n}\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Теперь логика для нашего модального окна завершена, а мы при необходимости сможем легко переиспользовать логику для других элементов!"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-348410e2.js.map
